<!-- 视频组件: <r-video src="视频地址" poster="封面图"></r-video> 
video标签在APP端是原生组件, 真机APP端下拉时会渲染不及时, 出现悬浮错位现象;
r-video组件, 未播放时自动展示image封面, 播放时才显示video, 提高性能; 如果播放中执行下拉,会自动显示封面, 避免视频下拉悬浮错位;
-->
<template>
	<view class="r-video" :style="{width:width, height:height}">

		<!-- 播放的时候才渲染video标签 -->
		<!-- 	<video v-if="showVideo" ref="videoRef" class="video" :class="{'full-play': fullplay&&!autoplay, 'mescroll-dowload': mescrollDownLoad}" :src="src" autoplay :loop="loop" @click.stop="videoClick" x5-playsinline="true" x5-video-player-type="h5" playsinline="true" webkit-playsinline="true" x5-video-player-fullscreen="false"></video> -->
		<!-- 播放按钮 -->
		<view class="btn-play" @click="videoPlay()">
			<image class="r-video-image" mode="widthFix"
				src="https://dnsverify.pfmoto.com/appstatic/community/video_paly_btn.png?x-amz-process=image/resize,w_750/quality,Q_50">
			</image>
		</view>
		<view class="triangle"></view>
		<!-- 封面 -->
		<image style="width: 690rpx;height: 402rpx;" class="poster"
			:src=" poster || 'https://dnsverify.pfmoto.com/appstatic/community/video_bg.jpg?x-amz-process=image/resize,w_750/quality,Q_50'"
			@click="videoPlay()" mode="aspectFill"></image>

	</view>
</template>

<script>
	export default {
		props: {
			src: String, // 视频地址
			poster: String, // 封面图
			autoplay: { // 是否自动播放
				type: Boolean,
				default () {
					return false
				}
			},
			fullplay: { // 是否全屏播放，默认不全屏
				type: Boolean,
				default () {
					return false
				}
			},
			loop: { // 是否循环播放
				type: Boolean,
				default () {
					return true // 循环播放可避免Android微信播放完毕显示广告
				}
			},
			width: { // 宽度 (需带单位,支持格式: '100%', '300px', '300rpx')
				type: String,
				default: "100%"
			},
			height: { // 高度 (需带单位,支持格式: '100%', '300px', '300rpx')
				type: String,
				default: "225px"
			},
			mescroll: { // mescroll对象,APP端下拉刷新时显示封面,隐藏视频.缓解APP端视频下拉悬浮错位问题
				type: Object,
				default () {
					return {}
				}
			}
		},
		data() {
			return {
				showVideo: this.autoplay // 是否播放视频
			}
		},
		computed: {
			// 是否下拉中 (下拉隐藏视频,显示封面, 仅APP端生效)
			mescrollDownLoad() {
				// #ifdef APP-PLUS
				return this.mescroll.downLoadType
				// #endif
				// #ifndef APP-PLUS
				return false
				// #endif
			}
		},
		watch: {
			autoplay(val) {
				if (val) this.play()
			}
		},
		methods: {
			createPreImg() { // event js原生事件

				const videoEle = document.createElement('videoEle'); // 当前video dom节点

				videoEle.currentTime = 1; // 设置视频开始播放时间（因为有些手机第一帧显示黑屏，所以这里选取视频的第一秒作为封面）

				videoEle.addEventListener('canplay', function() { // 监听video的canplay事件

					// 创建canvas元素 并设置canvas大小等于video节点的大小
					const canvas = document.createElement('canvas');
					const scale = 0.8; // 压缩系数
					canvas.width = videoEle.videoWidth * scale;
					canvas.height = videoEle.videoHeight * scale;

					// canvas画图
					canvas.getContext('2d').drawImage(videoEle, 0, 0, canvas.width, canvas.height);

					// 把canvas转成base64编码格式
					const imgSrc = canvas.toDataURL('image/png');

					// 创建img元素 插入到文档中
					const img = document.createElement('img');
					img.src = imgSrc;
					img.style.position = 'absolute';
					img.style.left = '0';
					img.style.top = '0';
					img.style.objectFit = 'cover';
					videoEle.parentNode && videoEle.parentNode.appendChild(img);
				});
			},
			// 播放
			play() {
				console.log("play");
				this.showVideo = true
				this.wxAutoPlay()
			},
			videoPlay() {
				uni.navigateTo({
					url: '/module_my/pages/videoDetail/videoDetail?src=' + this.src
				})
			},
			// 视频点击事件
			videoClick() {
				// 全屏播放时，点击视频退出
				if (this.fullplay) this.showVideo = false
			},
			// 解决微信端视频无法自动播放的问题
			wxAutoPlay() {
				// #ifdef H5
				// 微信端
				if (navigator.userAgent.toLowerCase().match(/MicroMessenger/i) == 'micromessenger') {
					// iOS
					let head = document.getElementsByTagName("head")[0]
					let wxscript = document.createElement("script");
					wxscript.type = "text/javascript"
					wxscript.src = "https://res.wx.qq.com/open/js/jweixin-1.6.0.js"
					head.appendChild(wxscript)
					let vm = this
					let doPlay = function() {
						vm.$refs.videoRef && vm.$refs.videoRef.play()
					}
					wxscript.onload = function() {
						window.wx.config({
							debug: !1,
							appId: "",
							timestamp: 1,
							nonceStr: "",
							signature: "",
							jsApiList: []
						})
						window.wx.ready(doPlay)
					}
					// Android
					document.addEventListener("WeixinJSBridgeReady", doPlay, false);
					// 先尝试播放
					setTimeout(() => {
						doPlay()
					}, 20)
				}
				// #endif
			}
		}
	}
</script>

<style lang="scss">
	.btn-play {

		z-index: 9;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 100rpx;
		height: 100rpx;




	}

	.r-video-image {
		width: 79rpx;
		height: 101rpx;

	}

	// 封面图
	.poster {
		/* #ifdef APP-VUE|| H5 ||MP-WEIXIN */
		width: 100%;
		height: 100%;
		vertical-align: bottom;
		/* #endif */


		/* #ifdef APP-NVUE */
		width: 700rpx;
		height: 400rpx;
		/* #endif */

	}

	.r-video {
		position: relative;
		// background-color: #000;
		overflow: hidden;

		// 播放按钮




		// 视频 (默认非全屏播放)

	}

	.full-play {
		z-index: 999;
		position: fixed;
	}

	.video {
		z-index: 8;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;

	}

	.mescroll-dowload {
		/* #ifdef H5 || MP-WEIXIN */
		display: none;
		/* #endif */

	}
</style>
